<script setup lang="js">
import { reactive, onMounted } from 'vue';
import axios from 'axios';
//-:配置数据
const configleft = reactive({
    radius: '40%',
    activeRadius: '45%',
    data: [],
    digitalFlopStyle: {
        fontSize: 20
    }
})
const configright = reactive({
    radius: '40%',
    activeRadius: '45%',
    data: [],
    digitalFlopStyle: {
        fontSize: 20
    }
})
const configtop = reactive({
    radius: '40%',
    activeRadius: '45%',
    data: [],
    digitalFlopStyle: {
        fontSize: 20
    }
})
const configbottom = reactive({
    radius: '40%',
    activeRadius: '45%',
    data: [],
    digitalFlopStyle: {
        fontSize: 20
    }
})
//-:获取数据
function getData() {
    //-:获取服务器数据
    axios.get('/Pro-Postgraduate/queryBeiJing')
        .then((response) => {
            //console.log(response.data)
            //if (response.data.code == 200) {
                let obj = reactive({})
                for (let index = 0; index < response.data.length; index++) {
                    let yobj = response.data[index];
                    obj = {
                        name: yobj.type,
                        value: yobj.total
                    }

                    configleft.data.push(obj)
                }
            
        })
    }
    function getData1() {
    //-:获取服务器数据
    axios.get('/Pro-Postgraduate/queryLiaoNing')
        .then((response) => {
            //console.log(response.data)
            //if (response.data.code == 200) {
                let obj_1 = reactive({})
                for (let index = 0; index < response.data.length; index++) {
                    let yobj = response.data[index];
                    obj_1 = {
                        name: yobj.type,
                        value: yobj.total
                    }
                    configright.data.push(obj_1)
                }
        })
    }
    function getData2() {
    //-:获取服务器数据
    axios.get('/Pro-Postgraduate/queryHeiLongJiang')
        .then((response) => {
            //console.log(response.data)
            //if (response.data.code == 200) {
                let obj_2 = reactive({})
                for (let index = 0; index < response.data.length; index++) {
                    let yobj = response.data[index];
                    obj_2 = {
                        name: yobj.type,
                        value: yobj.total
                    }
                    configtop.data.push(obj_2)
                }
        })
    }
    function getData3() {
    //-:获取服务器数据
    axios.get('/Pro-Postgraduate/queryShangHai')
        .then((response) => {
            //console.log(response.data)
            //if (response.data.code == 200) {
                let obj_3 = reactive({})
                for (let index = 0; index < response.data.length; index++) {
                    let yobj = response.data[index];
                    obj_3 = {
                        name: yobj.type,
                        value: yobj.total
                    }
                    configbottom.data.push(obj_3)
                }
        })
    }
onMounted(() => {
    getData();
    getData1();
    getData2();
    getData3();
})
</script>
<template>
        <dv-decoration-7 style="width:230px;height:45px; color:azure;position: fixed;top:73%;font-size: 33;">
            <router-link to="/pageOne">地区大学类型占比排名</router-link>
        </dv-decoration-7>
        <div class="dv_div">
            <div class="div_son1">
                <h3 class="beijing">北京</h3>
                <dv-active-ring-chart  class="dv-active-ring-chart" :config="configleft" style="width:100%;height:300px" />
            </div>
            <div class="div_son2">
                <h3 class="liaoning">辽宁</h3>
                <dv-active-ring-chart  class="dv-active-ring-chart" :config="configright" style="width:100%;height:300px" />
            </div>
            <div class="div_son3">
                <h3 class="shanghai">上海</h3>
                <dv-active-ring-chart  class="dv-active-ring-chart" :config="configtop" style="width:100%;height:300px" />
            </div>
            <div class="div_son4">
                <h3 class="heilongjiang">黑龙江</h3>
                <dv-active-ring-chart  class="dv-active-ring-chart" :config="configbottom" style="width:100%;height:300px" />
            </div>
        </div>
</template>
<style lang="css" scoped>
a{
    text-decoration: none;
    color: azure;
    font-size: 18px;
  }
.beijing{
    color:azure;
    position: fixed;
    left:5%;
    top:79%
}
.liaoning{
    color:azure;
    position: fixed;
    left:17%;
    top:79%
}
.shanghai{
    color:azure;
    position: fixed;
    left:29%;
    top:79%
}
.heilongjiang{
    color:azure;
    position: fixed;
    left:41%;
    top:79%
}
.div_son1 {
    position: fixed;
    left: -44%;
    right: 0%;
    top: 77%;
    width: 100%;
    height: 100%;
}
.div_son2 {
    position: fixed;
    left: -32%;
    right: 0%;
    top: 77%;
    width: 100%;
    height: 100%;
}
.div_son3 {
    position: fixed;
    left: -20%;
    right: 0%;
    top: 77%;
    width: 100%;
    height: 100%;
}
.div_son4 {
    position: fixed;
    left: -8%;
    right: 0;
    top: 77%;
    width: 100%;
    height: 100%;
}
</style>
